<template>
  <!-- 广告位列表 -->
  <div class="advert-placement-wrap table-gl-w">
    <div class="search-w table-filter-form">
      <div class="filter-list flex-c">
        <template v-for="(item, i) in filterItem" :key="i">
          <div class="filter-item">
            <template v-if="item.type == 'date_range'">
              <a-range-picker v-model="item.value" :="item.attrs" :disabledDate="disabledDate" :style="{ width: item.width + 'px' }" :allow-clear="false" shortcuts-position="left" :shortcuts="rangeShortcuts()" @change="setSearchVal" />
            </template>
          </div>
        </template>
        <div class="filter-item">
          <a-button @click="resetAll">重置</a-button>
        </div>
      </div>
      <div class="filter-result" v-show="resultTags.length > 0">
        <a-space wrap>
          <a-tag v-for="item in resultTags" size="small" color="arcoblue" closable :key="item.key">
            <template v-if="!(item.tagVal instanceof Array && item.tagVal.length > 2)">
              <span> {{ item.label }}：</span>
              <p>{{ item.tagVal instanceof Array ? item.tagVal?.join(',') : item.tagVal }}</p>
            </template>
            <a-popover v-else position="bottom">
              <div class="flex-c">
                <span> {{ item.label }}：</span>
                <p>{{ item.tagVal[0] }}，{{ item.tagVal[1] }}等{{ item.tagVal.length }}项</p>
              </div>
              <template #content>
                <p v-for="(val, j) in item.tagVal" :key="j">{{ val }}</p>
              </template>
            </a-popover>
          </a-tag>
        </a-space>
      </div>
    </div>
    <!-- 广告位列表 -->
    <PlacementTable ref="placementTableRef" :searchParams="searchParam" />
  </div>
</template>

<script lang="ts" setup>
  import { FilterTableItem } from '@/types/components'
  import PlacementTable from './components/placementTable.vue'
  import { ref, onMounted, nextTick } from 'vue'
  import useAdvertStore from '@/store/modules/advert'
  import { getStartAndEndTime, rangeShortcuts } from '../common'
  import dayjs from 'dayjs'

  onMounted(async () => {
    setSearchVal()
  })
  const advertStore = useAdvertStore()
  const filterItem = ref<Array<FilterTableItem>>([
    {
      key: 'date',
      label: '日期',
      value: ref(advertStore.currentSearchTime),
      type: 'date_range',
      width: 240,
      attrs: {
        placeholder: ['开始日期', '结束日期'],
      },
    },
  ])
  const resultTags = ref<any>([])
  const searchParam = ref<any>({
    campaignId: advertStore.currentCampaign?.campaignId,
  })
  const placementTableRef = ref()

  //查询图表和表格数据
  function startSearch() {
    nextTick(() => {
      placementTableRef.value.getTableList()
    })
  }

  function setSearchVal() {
    setResultTags()
    searchParam.value = {
      campaignId: advertStore.currentCampaign?.campaignId,
      shopId: advertStore.currentShop?.shopId,
      adType: advertStore.currentCampaign?.adType,
    }
    filterItem.value.forEach((el: FilterTableItem) => {
      if (el.key == 'date') {
        searchParam.value.startDate = el.value?.[0]
        searchParam.value.endDate = el.value?.[1]
      } else {
        searchParam.value[el.key] = el.value
      }
    })
    startSearch()
  }

  function setResultTags() {
    resultTags.value = []
    filterItem.value.forEach((el: FilterTableItem) => {
      let val: any = el.value
      let noVal = val === '' || val === null || val === undefined || (val instanceof Array && val.length === 0)
      if (!noVal) {
        resultTags.value.push({
          ...el,
          tagVal: getTagVal(el),
        })
      }
    })
  }
  // 获取查过结果显示的值
  function getTagVal(item: FilterTableItem) {
    if (item.value instanceof Array) {
      return item.value.map((str: string) => {
        return enumVal(item.optionItems, item.optionField, str)
      })
    } else {
      return enumVal(item.optionItems, item.optionField, item.value)
    }
  }
  function enumVal(optionItems: any, optionField: any, str: any) {
    if (!optionItems?.length) return str
    let option = optionItems?.find((e: any) => str == e.value)
    return option?.label || str
  }
  //禁用时间
  function disabledDate(current) {
    return dayjs(current).isAfter(dayjs().subtract(1, 'day'))
  }
  function resetAll() {
    filterItem.value.forEach((el: FilterTableItem) => {
      if (el.key == 'date') {
        el.value = ref(getStartAndEndTime('last_30_days'))
      } else {
        el.value = ref()
      }
    })
    setSearchVal()
  }
</script>
<style lang="less" scoped>
  .advert-placement-wrap {
    height: calc(100vh - @menuAndTabHeight);
  }
  .filter-item {
    margin-right: 8px;
    margin-bottom: 5px;
  }
  .filter-result {
    margin-bottom: 5px;
  }
  .filter-list {
    flex-wrap: wrap;
  }
  .arco-scrollbar {
    flex: 1;
    overflow-y: hidden;
  }
</style>
